<template>
	<nav-header title="合作推广" custom-nav>
		<template v-slot:left>
			<view @tap.stop.native="back()">
				<svg-icon icon="arrowLeft" :width="40"></svg-icon>
			</view>
		</template>
	</nav-header>
	<view>
		<up-cell-group>
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item name="selectedGroupChat">
					<up-cell title="选择目标群聊" is-link :value="form.selectedGroupChat" center @click="openBox()">
						<template v-slot:icon>
							<view v-if="form.selectedGroupChat" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template v-slot:value>
							<text class="text-sm-Regular groupChat">{{form.selectedGroupChat}}</text>
						</template>
					</up-cell>
				</uni-forms-item>
				<view class="GroupBox">
					<!--  -->
					<group-select-box :filterGroupId="this.currentGroupID" ref="gsBox"
						@checked="checkedGroup"></group-select-box>
				</view>
				<uni-forms-item name="trafficRate">
					<up-cell title="流量费率" isLink url="/pageSubOne/group/group-trafficrate">
						<template v-slot:icon>
							<view v-if="form.trafficRate" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template #value>
							<text v-if="!Boolean(form.trafficRate)" class="text-sm-Regular u-slot-value">未选择¥
								0.01/人</text>
							<text v-else class="text-sm-Regular u-slot-value">已选择¥ {{ form.trafficRate }}/人</text>
						</template>
					</up-cell>
				</uni-forms-item>

				<uni-forms-item name="transactionCommission">
					<up-cell title="成交佣金" is-link url="/pageSubOne/group/group-commission">
						<template v-slot:icon>
							<view v-if="form.transactionCommission" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template #value>
							<text v-if="!Boolean(form.transactionCommission)"
								class="text-sm-Regular u-slot-value">¥选择您的成交佣金</text>
							<text v-else class="text-sm-Regular u-slot-value">¥
								{{ form.transactionCommission }}/人</text>
						</template>
					</up-cell>
				</uni-forms-item>

				<uni-forms-item name="trader">
					<up-cell title="交易人" is-link value="@张三" @tap="selectTrader">
						<template v-slot:icon>
							<view v-if="form.traderName" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template #value>
							<input type="text" disabled="true" :inputBorder="true" v-model="form.traderName"
								placeholder="请选择交易人"></input>
						</template>
					</up-cell>
				</uni-forms-item>
				<uni-forms-item name="phone">
					<up-cell title="联系电话" is-link value="188888888">
						<template v-slot:icon>
							<view v-if="form.phone" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template #value>
							<input v-model="form.phone" placeholder="请输入手机号码"></input>
						</template>
					</up-cell>
				</uni-forms-item>
				<uni-forms-item name="contact">
					<up-cell title="新建联系人" is-link value="李四先生">
						<template v-slot:icon>
							<view v-if="form.contact" class="mr-10">
								<svg-icon icon="success" :width="48"></svg-icon>
							</view>
							<view v-else class="mr-10">
								<svg-icon icon="unsuccess" :width="48"></svg-icon>
							</view>
						</template>
						<template #value>
							<input :inputBorder="false" v-model="form.contact" placeholder="请输入新建联系人"></input>
						</template>
					</up-cell>
				</uni-forms-item>
			</uni-forms>
		</up-cell-group>
	</view>

	<view class="button-container">
		<view class="send-button">
			<!-- <up-button :disabled="disabled" type="primary" @click="submit(myForms)" text="发送报价申请"></up-button> -->
			<button class="btncolor" type="primary" size="mini" @tap="submit">
				<text class="text-md-Medium">发送报价申请</text>
			</button>
		</view>
	</view>

	<view class="parent-component" v-if="show">
		<SelectUser @onShow="onShowUsers" v-if="show" :isShow="show" :method="'POST'"
			:url="`/group/findOwnerAdminByGroupId?groupId=${this.form.leaderGroup}`" :groupId="currentGroupID"
			@userSelected="handleSelectedUsers" />
	</view>


</template>

<script>
	import useCooperateStore from '@/store/cooperateStore.js'
	import SelectUser from '../../components/select-user/select-user.vue';
	export default {
		components: {
			SelectUser
		},
		data() {
			return {
				disabled: false,
				show: false,
				currentGroupID: '',
				user: {},
				form: {
					leaderGroup: '',
					followGroup: '',
					selectedGroupChat: '',
					trafficRate: '',
					transactionCommission: '',
					traderName: '',
					trader: '',
					phone: '',
					contact: ''
				},
				rules: {
					selectedGroupChat: {
						rules: [{
							required: true,
							errorMessage: '请选择群聊',
						}]
					},
					trafficRate: {
						rules: [{
							required: true,
							errorMessage: '请选择流量费率',
						}]
					},
					transactionCommission: {
						rules: [{
							required: true,
							errorMessage: '请选择合作佣金',
						}]
					},
					trader: {
						rules: [{
							required: true,
							errorMessage: '请输入交易人',
						}, ]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入电话号码',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号码'
							}
						]
					},
					contact: {
						rules: [{
								required: true,
								errorMessage: '请输入新建联系人',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '新建联系人姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				}



			}
		},
		methods: {
			back() {
				this.cooperateStore.clearCooperateStore()
				uni.navigateBack()
			},
			selectTrader() {
				if (this.form.leaderGroup) {
					this.show = true

				} else {
					uni.showToast({
						title: '请先选择群聊',
						icon: 'error',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});

				}

			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.$http({
						url: `/group/applyRelateGroup`,
						data: this.form,
						method: "POST"
					}).then((res) => {
						uni.showToast({
							title: '发送成功',
							icon: 'success',
							duration: 1000 // 设置显示时长为 3000 毫秒
						});

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					})

				}).catch(errors => {
					console.log(errors)
				});
			},
			openBox() {
				// 打开box
				console.log('box')
				// this.$refs.gsBox.init()
				this.$refs.gsBox.open()
			},
			checkedGroup(checkedGroup) {
				const store = useCooperateStore()
				store.setName(checkedGroup[0].name)
				this.form.selectedGroupChat = checkedGroup[0].name
				// 
				this.form.leaderGroup = checkedGroup[0].id
				// 通过群id 和关联群id 去判断该群是否已经申请过
				const data = {
					followGroup: this.form.followGroup,
					leaderGroup: this.form.leaderGroup
				}
				/**
				 * todo 判断 如果该官方群已经申请过推广 就把 发送报价申请为空
				 */
				this.$http({
					url: `/group/findGroupRelate`,
					data: data,
					method: "POST"
				}).then(res => {
					if (res) {
						this.disabled = true
					} else {
						this.disabled = false
					}

				})
			},
			// 选择用户
			handleSelectedUsers(selectedUsers) {
				if (selectedUsers.length > 0) {
					// 这里假设选择的用户信息中，用户姓名在某个字段里（比如 user.name），你需要根据实际 SelectUser 组件返回的数据结构调整
					console.log("用户测试单选，多选", selectedUsers)
					this.user = selectedUsers[0]
					this.form.traderName = this.user.nickName
					this.form.trader = this.user.id
					this.show = false; // 隐藏 SelectUser 组件
				}
			},
			// 隐藏组件
			onShowUsers() {
				this.show = false;
			},


		},
		onShow() {
			const store = useCooperateStore()
			const {
				price,
				bonus,
				name
			} = store
			this.form.trafficRate = price
			this.form.transactionCommission = bonus
			this.form.selectedGroupChat = name
		},
		onLoad(options) {
			this.form.followGroup = options.groupId;
			this.currentGroupID = options.groupId
		},
		onUnload() {
			this.cooperateStore.clearCooperateStore()
		}
	}
</script>

<style lang="scss" scoped>
	.GroupBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifdef H5 || MP-WEIXIN */
		z-index: 101;
		/* #endif */
		/* #ifdef APP-PLUS */
		z-index: 9999;
		/* #endif */
	}

	.groupChat {
		display: inline-block;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		white-space: nowrap;
		text-align: right;
	}

	.mr-10 {
		margin-right: 10rpx;
	}

	:deep(.u-cell__body) {
		padding: 24rpx 32rpx;
	}

	:deep(.uni-forms-item.is-direction-left) {
		margin-bottom: 0;
	}

	/* 设置按钮容器的样式，使其固定在底部 */
	.button-container {
		position: fixed;
		bottom: 42rpx;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid $gray-200;
		/* #ifdef APP-PLUS */
		z-index: 9998;
		/* #endif */
		/* #ifdef H5 || MP-WEIXIN */
		z-index: 100;
		/* #endif */

		.send-button {
			padding: 24rpx 32rpx;

			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				padding: 16rpx 32rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 46rpx;
				vertical-align: middle;
			}
		}
	}

	.parent-component {
		position: relative;
		width: 100%;
		height: 100%;
		/* #ifdef H5 || MP-WEIXIN */
		z-index: 101;
		/* #endif */
		/* #ifdef APP-PLUS */
		z-index: 9998;
		/* #endif */
	}
</style>